<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title">
        </el-input>
      </el-form-item>
      <el-form-item label="内容">
        <!-- v-model 是我们的富文本内容
        editorToolbar 使我们的工具栏配置 
        useCustomImageHandler= 是一个布尔值,
        如果为true 就可以自定义上传图片的方法
        定义完了这个,我们就可以监听一个事件
        image-added然后调用一个函数进行图片的上传 -->
        <vue-editor 
        v-model="form.content"
        :editorToolbar="customToolbar"
        :useCustomImageHandler='true'
        @image-added="imgUpload"
        ></vue-editor>
      </el-form-item>
      <el-form-item label="栏目">
         <el-checkbox-group v-model="form.categories">
            <el-checkbox 
            v-for="(item,index) in categoryList" 
            :key="index"
            :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
      </el-form-item>
      <el-form-item label="封面图片">
        <el-upload
          :file-list="form.cover"
          :action="$axios.defaults.baseURL +'/upload/'"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          :headers="{Authorization:token}">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="分类">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {VueEditor} from 'vue2-editor'
export default {
  components:{
    VueEditor
  },
  data(){
    return {
      postId:this.$route.query.id,
      form:{
        title:'',
        categories:[],
        type:'1',
        content:"<h1>标题内容</h1>",
        cover:[]
      },
      categoryList:[],
      customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }], ["image", "code-block"]],
      token:localStorage.getItem('token')
    }
  },
  mounted(){
    // 获取栏目列表
    this.$axios({
        url:'/category',
        method:'get'
      }).then(res=>{
        const {data}=res.data
        data.forEach(element => {
          if(element.id!=0&&element.id!=999){
            this.categoryList.push(element)
          }
        });
      })
     if(this.postId){
      //  console.log(this.postId)
       this.$axios({
         url:'/post/'+this.postId,
         method:'get'
       }).then(res=>{
         const {data} = res.data
        //  console.log(res.data.data)
         let newCategories=[]
          data.categories.forEach(element=>{
            newCategories.push(element.id);
          })
          data.categories=newCategories;
          data.cover.forEach((element,index)=>{
            element.uid=index
            element.url=this.$fixImgUrl(element.url)
          })
          // console.log(data)
         this.form=data
       })
     }
  },
  methods:{
    onSubmit(){
      let newCategories=[];
      this.form.categories.forEach(element => {
        newCategories.push({
          id:element
        })
      })
      this.form.categories=newCategories;
      // let newCover=[];
      // this.form.cover.forEach(element=>{
      //   newCover.push({id:element})  
      // })
      // this.form.cover=newCover
      // 发送axja请求
      this.$axios({
        url:this.postId?'/post_update/'+this.postId:'/post',
        method:'post',
        data:this.form
      }).then(res=>{
        const {data}=res.data;
        // console.log(data)
      })
    },
    imgUpload(file, Editor, cursorLocation, resetUploader){
      // file 使我们要上传的文件
      // Editor 是我们正在使用的编辑器
      // cursorLocation 这是子组件获取到的当前光标位置
      // restUploader 这是当你处理完了所有数据,应该重置这个上传的组件
      var formData =new FormData();
      formData.append('file',file);
      this.$axios({
        url:'/upload',
        method:'post',
        data:formData
      }).then(res=>{
        // console.log(res.data.data)
        const {data} =res.data
        let url=this.$axios.defaults.baseURL+data.url;
        //这是是将我们传到服务器,返回一个地址的图片放入编辑器当中
        // Editor 编辑器
        // insertEmbed 插入
        // cursorLocation 光标位置
        // url 使我们在上面传输完图片获取的地址
        Editor.insertEmbed(cursorLocation, "image", url);
        // 有一个必须要做的就是重置上传组件
        resetUploader();
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.form.cover=fileList
    },
    handleSuccess(res){
      // console.log(res.data);
      const data=res.data;
      this.form.cover.push({
        id:data.id,
        url:this.$axios.defaults.baseURL+data.url})
    }
  }
}
</script>

<style>

</style>